<template>
  <div class="main">
    <div>
      <!-- //:include="['home', 'bookshelf', 'Menu', 'my']"   加载过就保存下数据，不在加载 -->
      <keep-alive :exclude="['Main']">
        <!-- main组件的二级路由插座 -->
        <router-view></router-view>
      </keep-alive>
    </div>
    <van-tabbar v-model="activeIndex" active-color="red" route>
      <van-tabbar-item
        v-for="(item, i) in tabbarData"
        :key="i"
        :icon="item.icon"
        :to="{ name: item.routeName }"
      >
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activeIndex: 0,
      tabbarData: [
        {
          title: "书城",
          //路由名称
          routeName: "home",
          icon: "wap-home-o",
          routes: ["home"],
        },
        {
          title: "分类",
          routeName: "Menu",
          icon: "apps-o",
          routes: ["Menu"],
        },
        {
          title: "书架",
          routeName: "bookshelf",
          icon: "send-gift-o",
          routes: ["bookshelf"],
        },

        {
          title: "我的",
          routeName: "my",
          icon: "user-o",
          routes: ["my"],
        },
      ],
    };
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  .tabbar {
    width: 100%;
    background-color: #eee;
    position: fixed;
    bottom: 1px;
    display: flex;
    justify-content: space-around;
    .tabbar-item {
      font-size: 15px;
      p {
        margin: 0;
      }
    }
    .active {
      color: red;
    }
  }
}
</style>